<template>
	<div class="overtime-warning-information-management">
		<zk-searcher v-model="query" :options="searchColumns" />
		<w-block class="body" title="预警信息列表" style="margin-top: 10px">
			<zk-table
				:columns="tableColumns"
				:service="service"
				:query="query"
				:actions="actions"
				@refresh-data="getRefreshData"
			>
				<template #reply_flag_desc="scope">
					<div style="text-align: center">
						<el-link
							type="info"
							v-if="scope.row.reply_flag_desc == '已反馈'"
							@click="getDialog(scope.row)"
						>{{ scope.row.reply_flag_desc }}
						</el-link>
						<span type="info" v-else>{{ scope.row.reply_flag_desc }}</span>
					</div>
				</template>
				<template #control="scope">
					<template v-if="!scope.row.man_tip_db_state">
						<el-button
							size="small"
							type="text"
							@click="handleSupervise(scope)">
							督办
						</el-button>
					</template>
					<template v-if="scope.row.man_tip_db_state==1 || scope.row.man_tip_db_state==2 || scope.row.man_tip_db_state==3">
						<el-button
							disabled
							size="small"
							type="text">
							已督办
						</el-button>
					</template>
					<template v-if="scope.row.man_tip_db_state==4">
						<el-button
							size="small"
							type="text"
							@click="handleDialogLookResult(scope)">
							查看结果
						</el-button>
					</template>
				</template>
			</zk-table>
		</w-block>

		<w-dialog :visible.sync="visible" height="auto" :title="title">
			<div class="centerbox">
				<div class="item">
					<div class="datatitle">任务超时原因 ：</div>
					<div class="datalist">{{reason_type}}</div>
				</div>
				<div class="item">
					<div class="datatitle">责任人 ：</div>
					<div class="datalist">{{duty_person}}</div>
				</div>
				<div class="item">
					<div class="datatitle">超时具体原因 ：</div>
					<div class="datalist">{{overtime_content}}</div>
				</div>
				<div class="item">
					<div class="datatitle">整改措施 ：</div>
					<div class="datalist">{{handle_content}}</div>
				</div>
			</div>
			<template #footer>
				<div class="flex-end">
					<el-button type="primary" @click="visible=false">关 闭</el-button>
				</div>
			</template>
		</w-dialog>
		<w-dialog :visible.sync="visibleSupervise" height="auto" title="督办内容录入">
			<el-input
				type="textarea"
				:rows="8"
				placeholder="请输入督办内容"
				v-model="superviseContent">
			</el-input>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="visibleSupervise=false">取 消</el-button>
					<el-button type="primary" @click="handleCommitSuperviseContent">督 办</el-button>
				</div>
			</template>
		</w-dialog>
		<w-dialog :visible.sync="visibleLookResult" width="600px" title="查看结果">
			<table class="table-look-details">
				<tr><td class="bg-title">任务超时原因</td><td>{{this.model.man_tip_reason_type==='01'?'内部原因':'外部原因'}}</td></tr>
				<tr v-if="this.model.man_tip_fk_duty_person"><td class="bg-title">责任人</td><td>{{this.model.man_tip_fk_duty_person}}</td></tr>
				<tr><td class="bg-title">超时具体原因</td><td>{{this.model.man_tip_overtime_content}}</td></tr>
				<tr><td class="bg-title">整改措施</td><td>{{this.model.man_tip_handle_content}}</td></tr>
				<tr><td class="bg-title">反馈人</td><td>{{this.model.man_tip_done_person_name}}</td></tr>
			</table>
			<template #footer>
				<div class="flex-end">
					<el-button type="primary" @click="visibleLookResult=false">关 闭</el-button>
				</div>
			</template>
		</w-dialog>
	</div>
</template>
<script>
import {TYPE_ENUM}                                       from '@/common/zk-constants'
import {overtimeWarningInformationManagement as service} from '@/services'
import SearchTableCRUDMixin                              from '@/mixins/search-table-crud-mixin'

const columns = [
	{'label': '项目名称', 'key': 'project_name', table: true, search: true, form: true, required: true},
	{'label': '工作名称', 'key': 'work_name', table: true, form: true, required: true},
	{'label': '任务名称', 'key': 'task_name', table: true, form: true, required: true},
	// {'label': '责任单位', 'key': 'duty_dw', type: TYPE_ENUM.SELECT, storeKey: 'unitList', table: true, search: true, form: true, required: true},
	{'label': '责任部门', 'key': 'duty_dept', type: TYPE_ENUM.SELECT, storeKey: 'orgList', table: true, search: true, form: true, required: true},
	{
		'label' : '是否反馈',
		'key'   : 'reply_flag_desc',
		type    : TYPE_ENUM.RADIO,
		storeKey: 'feedbackState',
		table   : true,
		form    : true,
		required: true,
		slot    : true,
	},
	{
		'label' : '完成情况',
		type    : TYPE_ENUM.SELECT,
		storeKey: 'overTimeFinishState',
		'key'   : 'finish_state',
		search  : true,
		table   : true,
		form    : true,
		required: true
	},
	{'label': '应完成日期', 'key': 'should_done_time', type: TYPE_ENUM.DATE, table: true},
	{'label': '完成日期', 'key': 'done_time', type: TYPE_ENUM.DATE, table: true},
	{'label': '预警时间', 'key': 'warn_time', type: TYPE_ENUM.DATE, table: true},
	{
		'label' : '是否反馈',
		'key'   : 'reply_flag',
		type    : TYPE_ENUM.RADIO,
		storeKey: 'feedbackBooleanState',
		search  : true,
		table   : false,
		form    : true,
		required: true,
	},
]

export default {
	mixins : [SearchTableCRUDMixin],
	data() {
		return {
			columns,
			service,
			actions          : ['slot', 100],
			visible          : false,
			title            : '超时预警反馈信息',
			reason_type      : '',
			duty_person      : '',
			overtime_content : '',
			handle_content   : '',
			visibleSupervise : false,
			id               : undefined,
			superviseContent : '',
			visibleLookResult: false,
			query: { finish_state: this.$route.query.finish_state || '' }
		}
	},
	methods: {
		getRefreshData({tableData}) {
			// console.log('getRefreshData', tableData);
		},
		handleSupervise(scope) {
			console.log(scope);
			this.id               = scope.row.id;
			this.visibleSupervise = true;
		},
		async handleCommitSuperviseContent() {
			if (!this.id || !this.superviseContent) {
				this.$message.warning('不能为空');
				return;
			}
			this.visibleSupervise = false;
			const result          = await service.insertDb({
				"id"        : this.id,
				"ld_content": this.superviseContent
			})
			if (result) {
				this.id               = undefined;
				this.superviseContent = '';
				this.reload();
				this.$message.success('督办成功');
			}
			else {
				this.$message.warning('督办失败');
			}
		},
		async getDialog(row) {
			this.reason_type      = row.reason_type;
			this.duty_person      = row.duty_person;
			this.overtime_content = row.overtime_content;
			this.handle_content   = row.handle_content;
			this.visible          = true;
		},
		handleDialogLookResult({row}) {
			this.model             = {...row};
			this.visibleLookResult = true;
		},
	},
}
</script>
<style scoped lang="scss">
	.centerbox {
		display: flex;
		flex-direction: column;
		width: 100%;

		.item {
			display: flex;
			flex-direction: row;
			padding: 10px 10px;
			font-size: 16px;

			.datatitle {
				width: 30%;
				display: flex;
				justify-content: flex-end;
			}

			.datalist {
				width: 65%;
				padding-left: 20px;
			}
		}
	}

	.table-look-details {
		padding: 20px 0;
		width: 100%;
		border-collapse: collapse;

		td {
			border: 1px solid rgba(77, 116, 251, 0.3);
			padding: 10px 20px;
		}

		.bg-title {
			width: 200px;
			background-color: #f5f5f5;
		}

	}
</style>

